<template>

  <div>
 
  <div
 
   style="
 
    text-align: center;
 
    background-color: #f1f1f3;
 
    height: 100%;
 
    padding: 0px;
 
    margin: 0px;
 
   "
 
  >
 
   <el-row class="card-row">
 
    <el-col :span="8">
 
     <el-card shadow="hover" class="box-card centered-card">
 
      <div>
 
       <i class="el-icon-s-custom"></i>
 
       用户数量:
 
       <el-tag type="success">
 
        {{ userCount }}
 
       </el-tag>
 
      </div>
 
     </el-card>
 
    </el-col>
 
    <el-col :span="8">
 
     <el-card shadow="hover" class="box-card centered-card blue">
 
      <div>
 
       <i class="el-icon-s-custom"></i>
 
       管理员数量:
 
       <el-tag type="success">
 
        {{ adminCount }}
 
       </el-tag>
 
      </div>
 
     </el-card>
 
    </el-col>
 
    <el-col :span="8">
 
     <el-card shadow="hover" class="box-card centered-card purple">
 
      <div>
 
       <i class="el-icon-s-custom"></i>
 
       仓库数量:
 
       <el-tag type="success">
 
        {{ storageCount }}
 
       </el-tag>
 
      </div>
 
     </el-card>
 
    </el-col>
 
   </el-row>
 
   <el-row class="card-row">
 
    <el-col :span="8">
 
     <el-card shadow="hover" class="box-card centered-card gold">
 
      <div>
 
       <i class="el-icon-s-promotion"></i>
 
       库存数量:
 
       <el-tag disable-transitions>{{ goodsCount }}</el-tag>
 
      </div>
 
     </el-card>
 
    </el-col>
 
    <el-col :span="8">
 
     <el-card shadow="hover" class="box-card centered-card red">
 
      <div>
 
       <i class="el-icon-s-custom"></i>
 
       出库数量:
 
       <el-tag type="success">
 
        {{ outCount }}
 
       </el-tag>
 
      </div>
 
     </el-card>
 
    </el-col>
 
    <el-col :span="8">
 
     <el-card shadow="hover" class="box-card centered-card green">
 
      <div>
 
       <i class="el-icon-s-custom"></i>
 
       入库数量:
 
       <el-tag type="success">
 
        {{ inCount }}
 
       </el-tag>
 
      </div>
 
     </el-card>
 
    </el-col>
 
   </el-row>
 
 ​
 
   <el-row class="card-row">
 
    <el-col :span="12">
 
     <el-card shadow="hover" class="box-card centered-card blue">
 
      <div id="container1" style="height: 320px; width: 500px"></div>
 
      <div class="text">用户男女比例</div>
 
     </el-card></el-col
 
    >
 
    <el-col :span="12">
 
     <el-card shadow="hover" class="box-card centered-card pink">
 
      <div id="container2" style="height: 320px; width: 500px"></div>
 
      <div class="text">用户角色比例</div>
 
     </el-card></el-col
 
    >
 
   </el-row>
 
  </div>
 
  </div>
 
 </template>